<template>
  <div class="table-box">
    <ProTable
      ref="proTableRef"
      :columns="columns"
      :indent="30"
      :pagination="false"
      :request-api="GetTreeList"
      row-key="path"
      title="菜单列表"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button v-auth="BtnAuthCreate" :icon="CirclePlus" type="success" @click="CreateButtonClick">新增菜单 </el-button>
      </template>
      <!-- 菜单图标 -->
      <template #icon="scope">
        <el-icon :size="18">
          <component :is="scope.row.meta.icon"></component>
        </el-icon>
      </template>
      <!-- 菜单操作 -->
      <template #operation="scope">
        <el-button v-auth="BtnAuthCreate" :icon="DocumentAdd" link type="primary" @click="CreateButtonClick(scope.row)">
          子菜单
        </el-button>
        <el-button v-auth="BtnAuthUpdate" :icon="EditPen" link type="primary" @click="EditMenuClick(scope.row)"> 编辑 </el-button>
        <el-button v-auth="BtnAuthDelete" :icon="Delete" link type="primary" @click="DeleteData(scope.row)"> 删除 </el-button>
      </template>
    </ProTable>

    <!--弹出-创建-->
    <CreateSysMenuForm ref="createFormRef" @ReloadData="Reload()"></CreateSysMenuForm>
    <!--弹出创建 end-->

    <!--弹出-编辑-->
    <UpdateSysMenuForm ref="updateFormRef" @ReloadData="Reload()"></UpdateSysMenuForm>
    <!--弹出--编辑-->
  </div>
</template>

<script lang="ts" name="sysMenu" setup>
import { ref } from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { Delete, EditPen, CirclePlus, DocumentAdd } from "@element-plus/icons-vue";
import { DeleteSysMenu, getAuthMenuListApi } from "@/api/modules/menu";
import { SysMenuUpdate } from "@/api/interface/SysMenu/SysMenuUpdate";
import CreateSysMenuForm from "@/views/system/sysMenu/components/CreateSysMenuForm.vue";
import ProTable from "@/components/ProTable/index.vue";
import UpdateSysMenuForm from "@/views/system/sysMenu/components/UpdateSysMenuForm.vue";
import { SysMenuInfo } from "@/api/interface/SysMenu/SysMenuInfo";
import { SysMenuDelete } from "@/api/interface/SysMenu/SysMenuDelete";
import { ElMessage, ElMessageBox } from "element-plus";
import { RespOk } from "@/constant/codes";
import { BtnAuthCreate, BtnAuthDelete, BtnAuthUpdate } from "@/constant/enums/btn_permission";
import { dtoSysUserDelete, dtoSysUserInfo } from "@/api/dbdto/dtoSysUser";

const proTableRef = ref();
const updateFormRef = ref();
const createFormRef = ref();

// 表格配置项
const columns: ColumnProps[] = [
  { type: "index", label: "ID", width: 100 },
  { prop: "meta.title", width: 300, label: "菜单名称", align: "left", search: { el: "input" } },
  { prop: "meta.icon", label: "菜单图标", width: 100 },
  { prop: "name", label: "菜单 name", search: { el: "input" } },
  { prop: "path", label: "菜单路径", width: 300, search: { el: "input" } },
  { prop: "component", label: "组件路径", width: 300 },
  { prop: "operation", label: "操作", width: 250, fixed: "right" }
];

const GetTreeList = () => {
  return getAuthMenuListApi();
};

const Reload = () => {
  //刷新数据
  proTableRef.value.getTableList();
};

const CreateButtonClick = (row: any) => {
  if (row["id"]) {
    createFormRef.value.ShowPop(row["id"]);
  } else {
    createFormRef.value.ShowPop(0);
  }
};
const EditMenuClick = (row: any) => {
  let info = row as SysMenuInfo;
  info.title = row["meta"]["title"];
  info.icon = row["meta"]["icon"];
  info.isAffix = row["meta"]["isAffix"];
  info.isFull = row["meta"]["isFull"];
  info.isHide = row["meta"]["isHide"];
  info.isKeepAlive = row["meta"]["isKeepAlive"];
  info.isLink = row["meta"]["isLink"];
  updateFormRef.value.ShowPop(info);
};
//删除数据
const DeleteData = (data: dtoSysUserInfo | number[]) => {
  let ids = Array.isArray(data) ? data : [data["id"]];
  ElMessageBox.confirm("删除后不可恢复，是否确定?", "删除确认，共" + ids.length + "条数据", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    let params: dtoSysUserDelete = {
      id: ids
    };
    if (params["id"]) {
      DeleteSysMenu(params).then((res: any) => {
        if (res.code == RespOk) {
          ElMessage({ type: "success", message: "已删除" });
          Reload();
        }
      });
    } else {
      ElMessage({ type: "error", message: "id不存在" });
    }
  });
};
</script>

<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}
</style>
